<template>
  <div class="subjects">
    <el-card>
      <!-- 搜索 -->
      <el-form
        inline
        size="small"
      >
        <el-form-item label="学科名称">
          <el-input
            v-model="reqparams.subjectName"
            placeholder="搜索关键字"
          ></el-input>
        </el-form-item>
        <el-button @click="clear()">清除</el-button>
        <el-button
          type="primary"
          @click="search()"
        >搜索</el-button>
        <el-button
          type="success"
          style="float:right"
          icon="el-icon-edit"
          @click="showDialog = true"
        >新增学科</el-button>
      </el-form>
      <!-- 搜索 -->
      <!-- 提示 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 提示 -->
      <!-- 表格 -->
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          width="100"
          type="index"
        >
        </el-table-column>
        <el-table-column
          label="学科名称"
          prop="subjectName"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="创建者"
          prop="username"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="180"
        >
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          width="180"
        >
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay===1 ?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          width="180"
          prop="twoLevelDirectory"
        >
        </el-table-column>
        <el-table-column
          label="标签"
          width="180"
          prop="tags"
        >
        </el-table-column>
        <el-table-column
          label="题目数量"
          width="180"
          prop="totals"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="230"
        >
          <template slot-scope="scope">
            <el-link
              @click="tomulu(scope.row)"
              type="primary"
            >学科分类</el-link>
            <el-link
              @click="tobiaoqian(scope.row)"
              type="primary"
            >学科标签</el-link>
            <el-link type="primary">修改</el-link>
            <el-link
              type="primary"
              @click="del(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 页码 -->
      <div
        class="block"
        style="float:right"
      >
        <span class="demonstration"></span>
        <el-pagination
          layout="prev, pager, next,jumper,total"
          :total="total"
          :page-size="reqparams.pagesize"
          :current-page="reqparams.page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!-- 页码 -->
    </el-card>
    <!-- 弹层 -->
    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="30%"
      @close="btnCancel"
    >
      <el-form
        :model="addSubjectForm"
        :rules="rules"
      >
        <el-form-item
          label="学科名称"
          label-width="80px"
          prop="subjectName"
        >
          <el-input
            placeholder="请输入学科名称"
            v-model="addSubjectForm.subjectName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否显示"
          label-width="80px"
        >
          <el-switch
            inactive-value="0"
            active-value="1"
            v-model="addSubjectForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="btnok"
        >确 定</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { list as slist, remove, add as adds } from '@/api/hmmm/subjects'
export default {
  name: 'Subjects',
  components: {},
  props: {},
  data () {
    return {
      addSubjectForm: {
        subjectName: '',
        isFrontDisplay: ''
      },
      reqparams: {
        page: 1,
        pagesize: 10
      },
      rules: { subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }] },
      list: [],
      total: 0,
      showDialog: false,
      value: true
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getsubejcts()
  },
  mounted () { },
  // 组件方法
  methods: {

    del (id) {
      this.$confirm('此操作将永久删除学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        this.getsubejcts()
      }).catch(e => { })
    },
    tomulu (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'directorys', quwry: { id, name } })
    },
    tobiaoqian (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'tags', quwry: { id, name } })
    },
    async getsubejcts () {
      const { data } = await slist(this.reqparams)
      this.list = data.items
      this.total = data.counts
    },
    changePage (newpage) {
      this.reqparams.page = newpage
      this.getsubejcts()
    },
    search () {
      this.reqparams.page = 1
      this.getsubejcts()
    },
    clear () {
      this.reqparams.subjectName = null
    },
    btnCancel () {
      this.showDialog = false
    },
    async btnok () {
      await adds(this.addSubjectForm)
      this.getsubejcts()
      this.$message.success('添加成功')
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss">
.block {
  margin: 15px 0;
}
.el-link {
  margin-right: 10px;
}
</style>
